<div>
  <div class="panel-commarket">
    <!-- <TLoading :tloading="tv.tpanelMarket.tloading" /> -->
    <div class="hd">{{ "i18n.market.title" | translate: lang }}</div>
    <!--
      <div class="bd df jcsb">
        <div class="l df">
          <span
            matRipple
            *ngFor="let item of muLists; let i = index"
            (click)="setOnMu(item)"
            [ngClass]="{
              on: item.symbol === onMu.symbol,
              love: item.symbol === 'love'
            }"
            [innerHTML]="item.symbol === 'love' ? '收藏' : item.symbol"
          ></span>
        </div>
      </div>
    -->
    <div class="bd df jcsb aic">
      <div class="l">
        <app-coin-select (onChange)="onChangeCoin($event)"></app-coin-select>
      </div>
      <div class="r">
        <div class="eh-search">
          <input
            style="width: 158px;"
            placeholder="Find..."
            maxlength="7"
            type="text"
            [formControl]="search$"
            (input)="onInputSearch($event)"
          />
          <i class="icon iconfont" style="right:10px;">&#xe606;</i>
        </div>
      </div>
    </div>
    <div class="ft">
      <div class="h df jcsb">
        <span class="df"
          >{{ "i18n.market.coin" | translate: lang }}
          <!--
            <div class="arrow">
              <div class="u">
                <app-icon-arrow
                  turn="up"
                  [tstyle]="{ fill: '#7D86AC', width: '20px', height: '20px' }"
                ></app-icon-arrow>
              </div>
              <div class="d">
                <app-icon-arrow
                  turn="down"
                  [tstyle]="{ fill: '#7D86AC', width: '20px', height: '20px' }"
                ></app-icon-arrow>
              </div>
            </div>
          -->
        </span>
        <span class="df"
          >{{ "i18n.market.lastPrice" | translate: lang }}

          <!--
            <div class="arrow">
              <div class="u">
                <app-icon-arrow
                  turn="up"
                  [tstyle]="{ fill: '#7D86AC', width: '20px', height: '20px' }"
                ></app-icon-arrow>
              </div>
              <div class="d">
                <app-icon-arrow
                  turn="down"
                  [tstyle]="{ fill: '#7D86AC', width: '20px', height: '20px' }"
                ></app-icon-arrow>
              </div>
            </div>
          -->
        </span>
        <span class="df"
          >{{ "i18n.market.change" | translate: lang }}

          <!--
            <div class="arrow">
              <div class="u">
                <app-icon-arrow
                  turn="up"
                  [tstyle]="{ fill: '#7D86AC', width: '20px', height: '20px' }"
                ></app-icon-arrow>
              </div>
              <div class="d">
                <app-icon-arrow
                  turn="down"
                  [tstyle]="{ fill: '#7D86AC', width: '20px', height: '20px' }"
                ></app-icon-arrow>
              </div>
            </div>
          -->
        </span>
      </div>
      <div
        class="b"
        [ngClass]="{ marked: onMu.symbol == 'love' }"
        data-scrollbar
        style="overflow-y: scroll;"
      >
        <div>
          <div
            (click)="toOnZi(item)"
            class="i df jcsb"
            [ngClass]="{ on: item.symbol == onZi.symbol }"
            *ngFor="let item of (ziLists$ | async); let i = index"
          >
            <div class="l">
              <span
                v-praise
                style="position: relative"
                (click)="saveLove(item)"
              >
                <app-icon-star
                  [hidden]="item.isLove ? false : true"
                  [ttype]="'empty'"
                  [tstyle]="{ fill: '#7D86AC', widht: '14px', height: '14px' }"
                ></app-icon-star>
                <app-icon-star
                  [hidden]="item.isLove ? false : true"
                  [ttype]="'solid'"
                  [tstyle]="{ fill: '#5693FF', widht: '14px', height: '14px' }"
                ></app-icon-star>
              </span>
              {{ item.symbol }}
            </div>
            <div class="c">{{ item.lastPrice }}</div>
            <div
              class="r"
              appChange
              [val]="item.change"
              v-change="item.change"
              v-toFixed="{val:item.change,point:2,isPercent:true}"
            >
              {{ item.change }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
